<template>
  <div class="home">
    <!-- Swiper 轮播图 -->
    <div class="hero-section">
      <div v-if="banners.length === 0" class="no-banners">
        <div class="no-banners-content">
          <h2>暂无轮播图</h2>
          <p>管理员可以在后台添加轮播图</p>
        </div>
      </div>
      <Swiper
        v-else
        :modules="modules"
        :slides-per-view="1"
        :loop="banners.length >= 3"
        :autoplay="banners.length >= 2 ? {
          delay: 3000,
          disableOnInteraction: false,
        } : false"
        :allow-touch-move="banners.length > 1"
        class="swiper-container"
        data-aos="fade-down"
      >
        <SwiperSlide v-for="banner in banners" :key="banner.id">
          <div class="banner-item">
            <img :src="banner.image" :alt="banner.title" />
            <div class="banner-content">
              <h2>{{ banner.title }}</h2>
              <p>{{ banner.description }}</p>
              <el-button type="primary" size="large" @click="goToDetail(banner.id)">
                立即观看
              </el-button>
            </div>
          </div>
        </SwiperSlide>
      </Swiper>
    </div>

    <!-- 推荐视频 -->
    <div class="recommend-section">
      <div class="content-wrapper">
        <div class="section-header" data-aos="fade-up">
          <h2 class="section-title">
            <el-icon class="title-icon"><Star /></el-icon>
            热门推荐
          </h2>
          <div class="section-controls">
            <el-button-group>
              <el-button size="small" @click="refreshRecommendations">
                <el-icon><Refresh /></el-icon>
                刷新
              </el-button>
              <el-button size="small" @click="goToCategory('recommended')">
                查看更多
                <el-icon><ArrowRight /></el-icon>
              </el-button>
            </el-button-group>
          </div>
        </div>
        <div class="video-grid">
          <div
            v-for="(video, index) in videos"
            :key="video.id"
            class="video-card"
            :class="{ 'featured': video.is_featured }"
            data-aos="fade-up"
            :data-aos-delay="index * 100"
            @click="goToDetail(video.id)"
          >
            <div class="video-thumbnail">
              <img :src="video.thumbnail" :alt="video.title" />
              <div class="video-overlay">
                <el-icon class="play-icon"><CaretRight /></el-icon>
              </div>
              <span class="duration">{{ video.duration }}</span>
              <span class="views">
                <el-icon><View /></el-icon>{{ formatViews(video.views) }}
              </span>
              <div v-if="video.is_featured" class="featured-badge">
                <el-icon><Star /></el-icon>
                推荐
              </div>
            </div>
            <div class="video-info">
              <h3>{{ video.title }}</h3>
              <p>{{ video.description }}</p>
              <div class="video-meta">
                <span class="category">
                  <el-icon><Grid /></el-icon>
                  {{ video.category?.name || '未分类' }}
                </span>
                <span class="date">{{ formatDate(video.created_at) }}</span>
              </div>
              <div class="video-stats">
                <span class="likes">
                  <el-icon><Star /></el-icon>
                  {{ video.likes || 0 }}
                </span>
                <span class="comments">
                  <el-icon><ChatDotRound /></el-icon>
                  {{ video.comments_count || 0 }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 快速导航 -->
    <div class="quick-nav-section">
      <div class="content-wrapper">
          <h2 class="section-title" data-aos="fade-up">快速导航</h2>
          <div class="quick-nav-grid" data-aos="fade-up">
            <div class="nav-item" @click="goToCategory('action')">
              <el-icon class="nav-icon"><CaretRight /></el-icon>
              <span>动作片</span>
            </div>
            <div class="nav-item" @click="goToCategory('comedy')">
              <el-icon class="nav-icon"><Star /></el-icon>
              <span>喜剧片</span>
            </div>
            <div class="nav-item" @click="goToCategory('romance')">
              <el-icon class="nav-icon"><View /></el-icon>
              <span>爱情片</span>
            </div>
            <div class="nav-item" @click="goToCategory('drama')">
              <el-icon class="nav-icon"><Monitor /></el-icon>
              <span>剧情片</span>
            </div>
            <div class="nav-item" @click="goToSearch">
              <el-icon class="nav-icon"><Search /></el-icon>
              <span>搜索</span>
            </div>
            <div class="nav-item" @click="goToUser">
              <el-icon class="nav-icon"><User /></el-icon>
              <span>个人中心</span>
            </div>
          </div>
      </div>
    </div>

    <!-- 分类推荐 -->
    <div class="category-section">
      <div class="content-wrapper">
          <h2 class="section-title" data-aos="fade-up">分类推荐</h2>
          <div class="category-tabs" data-aos="fade-up">
            <el-tabs v-model="activeCategory" @tab-change="loadCategoryVideos">
              <el-tab-pane label="动作片" name="action">
                <div class="category-videos">
                  <div
                    v-for="video in categoryVideos"
                    :key="video.id"
                    class="category-video-card"
                    @click="goToDetail(video.id)"
                  >
                    <img :src="video.thumbnail" :alt="video.title" />
                    <div class="category-video-info">
                      <h4>{{ video.title }}</h4>
                      <p>{{ formatViews(video.views) }} 次播放</p>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="喜剧片" name="comedy">
                <div class="category-videos">
                  <div
                    v-for="video in categoryVideos"
                    :key="video.id"
                    class="category-video-card"
                    @click="goToDetail(video.id)"
                  >
                    <img :src="video.thumbnail" :alt="video.title" />
                    <div class="category-video-info">
                      <h4>{{ video.title }}</h4>
                      <p>{{ formatViews(video.views) }} 次播放</p>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="爱情片" name="romance">
                <div class="category-videos">
                  <div
                    v-for="video in categoryVideos"
                    :key="video.id"
                    class="category-video-card"
                    @click="goToDetail(video.id)"
                  >
                    <img :src="video.thumbnail" :alt="video.title" />
                    <div class="category-video-info">
                      <h4>{{ video.title }}</h4>
                      <p>{{ formatViews(video.views) }} 次播放</p>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
      </div>
    </div>

    <!-- 最新更新 -->
    <div class="latest-section">
      <div class="content-wrapper">
          <div class="section-header" data-aos="fade-up">
            <h2 class="section-title">最新更新</h2>
            <el-button text @click="goToCategory('latest')">查看更多</el-button>
          </div>
          <div class="latest-grid" data-aos="fade-up">
            <div
              v-for="video in latestVideos"
              :key="video.id"
              class="latest-card"
              @click="goToDetail(video.id)"
            >
              <img :src="video.thumbnail" :alt="video.title" />
              <div class="latest-info">
                <h4>{{ video.title }}</h4>
                <p>{{ video.category?.name || '未分类' }}</p>
                <span>{{ formatDate(video.created_at) }}</span>
              </div>
            </div>
          </div>
      </div>
    </div>

    <!-- 排行榜 -->
    <div class="ranking-section">
      <div class="content-wrapper">
          <h2 class="section-title" data-aos="fade-up">热门排行榜</h2>
          <div class="ranking-list" data-aos="fade-up">
            <div
              v-for="(video, index) in rankingVideos"
              :key="video.id"
              class="ranking-item"
              @click="goToDetail(video.id)"
            >
              <div class="ranking-number" :class="`rank-${index + 1}`">
                {{ index + 1 }}
              </div>
              <img :src="video.thumbnail" :alt="video.title" />
              <div class="ranking-info">
                <h4>{{ video.title }}</h4>
                <p>{{ video.category?.name || '未分类' }}</p>
                <div class="ranking-stats">
                  <span>{{ formatViews(video.views) }} 次播放</span>
                  <span>{{ video.likes }} 点赞</span>
                </div>
              </div>
            </div>
          </div>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-overlay">
      <el-progress :percentage="50" />
      <p>加载中...</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Autoplay } from 'swiper/modules'
import { ElContainer, ElMain, ElIcon, ElButton, ElTabs, ElTabPane, ElProgress } from 'element-plus'
import { View, Star, Monitor, Search, User, CaretRight, Refresh, ArrowRight, Grid, ChatDotRound } from '@element-plus/icons-vue'
import AOS from 'aos'
import 'aos/dist/aos.css'
import 'swiper/css'
import 'swiper/css/autoplay'
import api from '@/utils/axios'

const router = useRouter()
const modules = [Autoplay]

const banners = ref([])
const videos = ref([])
const loading = ref(false)
const activeCategory = ref('action')
const categoryVideos = ref([])
const latestVideos = ref([])
const rankingVideos = ref([])

const goToDetail = (id) => {
  router.push(`/detail/${id}`)
}

// 加载轮播图数据
const loadBanners = async () => {
  try {
    const response = await api.get('/videos/banners')
    if (response.success) {
      banners.value = response.data
      console.log('轮播图数据加载成功:', banners.value.length, '个轮播图')
    }
  } catch (error) {
    console.error('加载轮播图失败:', error)
  }
}

// 刷新推荐视频
const refreshRecommendations = async () => {
  await loadVideos()
}

// 加载推荐视频数据
const loadVideos = async () => {
  try {
    loading.value = true
    const response = await api.get('/videos/recommended')
    if (response.success) {
      videos.value = response.data.map(video => ({
        id: video.id,
        title: video.title,
        description: video.description,
        thumbnail: video.thumbnail,
        duration: video.duration,
        views: formatViews(video.views),
        category: video.category?.name || '未分类',
        uploadDate: formatDate(video.created_at)
      }))
    }
  } catch (error) {
    console.error('加载视频失败:', error)
  } finally {
    loading.value = false
  }
}

// 格式化播放量
const formatViews = (views) => {
  if (views >= 10000) {
    return (views / 10000).toFixed(1) + '万'
  }
  return views.toString()
}

// 格式化日期
const formatDate = (dateString) => {
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN')
}

// 加载分类视频
const loadCategoryVideos = async (category) => {
  try {
    const response = await api.get('/videos', {
      params: { category_id: getCategoryId(category) }
    })
    if (response.success) {
      categoryVideos.value = response.data.data.slice(0, 6)
    }
  } catch (error) {
    console.error('加载分类视频失败:', error)
  }
}

// 加载最新视频
const loadLatestVideos = async () => {
  try {
    const response = await api.get('/videos', {
      params: { sort_by: 'created_at', order: 'desc' }
    })
    if (response.success) {
      latestVideos.value = response.data.data.slice(0, 8).map(video => ({
        ...video,
        category: video.category?.name || '未分类'
      }))
    }
  } catch (error) {
    console.error('加载最新视频失败:', error)
  }
}

// 加载排行榜
const loadRankingVideos = async () => {
  try {
    const response = await api.get('/videos', {
      params: { sort_by: 'views', order: 'desc' }
    })
    if (response.success) {
      rankingVideos.value = response.data.data.slice(0, 10).map(video => ({
        ...video,
        category: video.category?.name || '未分类'
      }))
    }
  } catch (error) {
    console.error('加载排行榜失败:', error)
  }
}

// 获取分类ID
const getCategoryId = (category) => {
  const categoryMap = {
    'action': 1,
    'comedy': 2,
    'romance': 4,
    'drama': 3
  }
  return categoryMap[category] || 1
}

// 导航函数
const goToCategory = (category) => {
  router.push('/category')
}

const goToSearch = () => {
  router.push('/search')
}

const goToUser = () => {
  router.push('/user')
}

onMounted(() => {
  AOS.init({
    duration: 1000,
    easing: 'ease-in-out'
  })
  loadBanners()
  loadVideos()
  loadCategoryVideos('action')
  loadLatestVideos()
  loadRankingVideos()
})
</script>

<style scoped>
.home {
  min-height: 100vh;
  width: 100vw;
  max-width: none;
  background: #0a0a0a;
  color: #fff;
  margin: 0;
  padding: 0;
}

.hero-section {
  width: 100vw;
  max-width: none;
  height: 450px;
  margin-bottom: 60px;
  padding: 0;
  position: relative;
}

.swiper-container {
  width: 100vw;
  max-width: none;
  height: 100%;
  position: relative;
}

.banner-item {
  position: relative;
  width: 100vw;
  max-width: none;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-item img {
  width: 100vw;
  max-width: none;
  height: 100%;
  object-fit: cover;
  display: block;
}

.banner-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100vw;
  max-width: none;
  padding: 40px;
  background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
}

.banner-content h2 {
  font-size: 36px;
  margin-bottom: 10px;
}

.banner-content p {
  font-size: 18px;
  opacity: 0.8;
}

.no-banners {
  height: 400px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.no-banners-content {
  text-align: center;
  color: #fff;
}

.no-banners-content h2 {
  font-size: 32px;
  margin-bottom: 10px;
}

.no-banners-content p {
  font-size: 16px;
  opacity: 0.8;
}

.recommend-section {
  width: 100vw;
  max-width: none;
  padding: 60px 0;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  margin: 0;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  color: white;
  font-size: 2rem;
  margin: 0;
}

.title-icon {
  color: #ff6b35;
  font-size: 2rem;
}

.section-controls {
  display: flex;
  gap: 12px;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 30px;
  padding: 0;
  max-width: none;
}

.video-card {
  background: #2a2a2a;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  border: 1px solid transparent;
}

.video-card:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
  border-color: #ff6b35;
}

.video-card.featured {
  background: linear-gradient(135deg, #2a2a2a 0%, #3a2a2a 100%);
  border-color: #ff6b35;
}

.video-card.featured::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #ff6b35, #ff8c42, #ff6b35);
  z-index: 1;
}

.content-wrapper {
  max-width: none;
  width: 100vw;
  padding: 0 40px;
  margin: 0;
}

.quick-nav-section,
.category-section,
.latest-section,
.ranking-section {
  width: 100vw;
  max-width: none;
  padding: 40px 0;
  margin: 0;
}

.section-title {
  font-size: 28px;
  margin-bottom: 30px;
  color: #fff;
  padding-left: 0;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  padding: 0;
  max-width: none;
}

.video-card {
  background: #1a1a1a;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
}

.video-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 24px rgba(255,255,255,0.1);
}

.video-thumbnail {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
}

.video-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.video-card:hover .video-thumbnail img {
  transform: scale(1.08);
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.video-card:hover .video-overlay {
  opacity: 1;
}

.play-icon {
  font-size: 60px;
  color: white;
  text-shadow: 0 0 20px rgba(255, 107, 53, 0.5);
}

.duration {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
}

.views {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
}

.featured-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: linear-gradient(135deg, #ff6b35, #ff8c42);
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

.video-info {
  padding: 24px;
}

.video-info h3 {
  color: white;
  margin: 0 0 12px 0;
  font-size: 1.2rem;
  line-height: 1.4;
  font-weight: 600;
}

.video-info p {
  color: #ccc;
  margin: 0 0 16px 0;
  font-size: 0.95rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.video-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-size: 0.9rem;
}

.video-meta .category {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #ff6b35;
  font-weight: 500;
}

.video-meta .date {
  color: #999;
}

.video-stats {
  display: flex;
  gap: 16px;
  font-size: 0.85rem;
}

.video-stats span {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #999;
}

.video-stats .likes {
  color: #ff6b35;
}

.video-stats .comments {
  color: #4a9eff;
}

@media (min-width: 1920px) {
  .video-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (min-width: 1400px) and (max-width: 1919px) {
  .video-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 992px) and (max-width: 1399px) {
  .video-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .video-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .video-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
  }
  
  .banner-content h2 {
    font-size: 24px;
  }
  
  .banner-content p {
    font-size: 14px;
  }
}

/* 新增样式 */
.banner-content .el-button {
  margin-top: 20px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding: 0 20px;
}

.quick-nav-section {
  width: 100vw;
  max-width: none;
  padding: 40px 20px;
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
  margin: 0;
}

.quick-nav-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  padding: 0 20px;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-5px);
  border-color: #409eff;
}

.nav-icon {
  font-size: 24px;
  margin-bottom: 10px;
  color: #409eff;
}

.nav-item span {
  font-size: 14px;
  color: #fff;
}

.category-section {
  width: 100vw;
  max-width: none;
  padding: 40px 20px;
  margin: 0;
}

.category-tabs {
  padding: 0 20px;
}

.category-videos {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  margin-top: 20px;
}

.category-video-card {
  cursor: pointer;
  transition: transform 0.3s ease;
}

.category-video-card:hover {
  transform: translateY(-5px);
}

.category-video-card img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 10px;
}

.category-video-info h4 {
  font-size: 14px;
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category-video-info p {
  font-size: 12px;
  color: #999;
}

.latest-section {
  width: 100vw;
  max-width: none;
  padding: 40px 20px;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
  margin: 0;
}

.latest-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 15px;
  padding: 0 20px;
}

.latest-card {
  cursor: pointer;
  transition: transform 0.3s ease;
}

.latest-card:hover {
  transform: translateY(-3px);
}

.latest-card img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 8px;
}

.latest-info h4 {
  font-size: 12px;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.latest-info p {
  font-size: 10px;
  color: #999;
  margin-bottom: 2px;
}

.latest-info span {
  font-size: 9px;
  color: #666;
}

.ranking-section {
  width: 100vw;
  max-width: none;
  padding: 40px 20px;
  margin: 0;
}

.ranking-list {
  padding: 0 20px;
}

.ranking-item {
  display: flex;
  align-items: center;
  padding: 15px;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.ranking-item:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateX(5px);
}

.ranking-number {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-right: 15px;
  font-size: 14px;
}

.rank-1 {
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  color: #000;
}

.rank-2 {
  background: linear-gradient(135deg, #c0c0c0, #e8e8e8);
  color: #000;
}

.rank-3 {
  background: linear-gradient(135deg, #cd7f32, #daa520);
  color: #fff;
}

.rank-4, .rank-5, .rank-6, .rank-7, .rank-8, .rank-9, .rank-10 {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.ranking-item img {
  width: 60px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
  margin-right: 15px;
}

.ranking-info {
  flex: 1;
}

.ranking-info h4 {
  font-size: 16px;
  margin-bottom: 5px;
}

.ranking-info p {
  font-size: 12px;
  color: #999;
  margin-bottom: 5px;
}

.ranking-stats {
  display: flex;
  gap: 15px;
}

.ranking-stats span {
  font-size: 11px;
  color: #666;
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loading-overlay p {
  margin-top: 20px;
  color: #fff;
}

/* 响应式设计 - 优化版本 */
@media (min-width: 1920px) {
  .content-wrapper {
    padding: 0 80px;
  }
  
  .video-grid {
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  }
  
  .quick-nav-grid {
    grid-template-columns: repeat(10, 1fr);
  }
  
  .category-videos {
    grid-template-columns: repeat(8, 1fr);
  }
  
  .latest-grid {
    grid-template-columns: repeat(10, 1fr);
  }
}

@media (min-width: 1600px) {
  .content-wrapper {
    padding: 0 60px;
  }
  
  .video-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
  
  .quick-nav-grid {
    grid-template-columns: repeat(8, 1fr);
  }
  
  .category-videos {
    grid-template-columns: repeat(6, 1fr);
  }
  
  .latest-grid {
    grid-template-columns: repeat(8, 1fr);
  }
}

@media (min-width: 1400px) {
  .content-wrapper {
    padding: 0 50px;
  }
  
  .video-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
  
  .quick-nav-grid {
    grid-template-columns: repeat(8, 1fr);
  }
  
  .category-videos {
    grid-template-columns: repeat(6, 1fr);
  }
  
  .latest-grid {
    grid-template-columns: repeat(8, 1fr);
  }
}

@media (min-width: 1200px) {
  .content-wrapper {
    padding: 0 40px;
  }
  
  .video-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
  
  .quick-nav-grid {
    grid-template-columns: repeat(7, 1fr);
  }
  
  .category-videos {
    grid-template-columns: repeat(5, 1fr);
  }
  
  .latest-grid {
    grid-template-columns: repeat(7, 1fr);
  }
}

@media (min-width: 992px) {
  .content-wrapper {
    padding: 0 30px;
  }
  
  .video-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
  
  .quick-nav-grid {
    grid-template-columns: repeat(6, 1fr);
  }
  
  .category-videos {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .latest-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (min-width: 768px) {
  .content-wrapper {
    padding: 0 25px;
  }
  
  .video-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
  
  .quick-nav-grid {
    grid-template-columns: repeat(5, 1fr);
  }
  
  .category-videos {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .latest-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (min-width: 576px) {
  .content-wrapper {
    padding: 0 20px;
  }
  
  .video-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
  
  .quick-nav-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .category-videos {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .latest-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 575px) {
  .content-wrapper {
    padding: 0 15px;
  }
  
  .video-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
  }
  
  .quick-nav-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .category-videos {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .latest-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .section-title {
    font-size: 22px;
  }
  
  .nav-item {
    padding: 10px;
  }
  
  .nav-item span {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .content-wrapper {
    padding: 0 12px;
  }
  
  .video-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
  }
  
  .quick-nav-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .category-videos {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .latest-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .section-title {
    font-size: 20px;
  }
  
  .nav-item {
    padding: 8px;
  }
  
  .nav-item span {
    font-size: 12px;
  }
}
</style>
